<!DOCTYPE html>
<html lang="en"  ng-app="test">
<head>
	<meta charset="UTF-8">
	<title>{{aa}}</title>
</head>
<body>
	<!-- <input type="text" ng-model="aa"> -->
	<!-- 1、作为标签使用 -->
	<!-- <hello-word></hello-word>
	<hello-word></hello-word>
	<hello-word></hello-word> -->

	<!-- 2、作为属性使用 -->
	<!-- <div hello-word></div> -->

	<!-- 3、作为 class 使用 -->
	<!-- <div  class="hello-word"></div> -->

	<!-- 4、使用注释使用 -->

	<!-- hello-word -->

	<!-- 标签里面嵌套内容 -->
	<hello-word>
	我是谁
	</hello-word>


</body>
<script type="text/javascript" src="../shop/js/angular.min.js"></script>
<script type="text/javascript">
	/*
	1、指令（系统内置指令、自定义指令）
	2、过滤器（系统过滤器、自定义过滤器）
	3、依赖注入
	4、路由
	5、数据绑定
	 */
	
	/*
	
	1、指令：（directive）,指令其实就是 AngularJS 定义的一系列操作。
	指令分为系统指令和自定义指令
	指令使用的都是驼峰法命名（定义的时候都是这样定义的）
	注意：使用的时候，才用“-”分隔单词
	指令1：ng-app，是指令系统里面最重要的一个指令，它定义文件哪个区域可以使用AngularJS。
	一个项目，只能出现一次ng-app(AngularJS定位于做单应用)

	指令2：ng-model：用来实现数据绑定，主要用于 input 标签。本质就是，定义一个变量来保存 input 标签的内容，标签的内容发送改变，这个变量就动态实时改变
	 */
	
	/*
		自定义指令
		前提：ng-app不能为空
		获取 app模块

		 全局对象
		html里面的 window
			AngularJS里面有一个全局对象叫 angular
		全局函数（属性）
			全局对象的方法就叫全局函数
	
	 */
	
	// 需要俩个参数：1、模块的名字  2、数组（数组里面装载的字符串）
	
	// 这个方法的功能：
	// 1、如果不存在参数1说明的模块，则创建一个新的模块
	// 2、如果存在，则获取这个模块
	var app = angular.module("test",[]);
	// 自定义指令，需要俩个参数
	// 1、指令的名字
	// 2、指令的内容
	// 自定义的指令会自动忽略里面所嵌套的内容
	app.directive("helloWord",function(){

		return {
			// template:"<ul><li>王宝强</li><li>马蓉</li><ng-transclude></ng-transclude><li>宋喆</li></ul>",
			restrict:"EACM",
			replace:true,
			transclude:true,
			templateUrl:"template1.html"
		};

	});



</script>
</html>

